<template>
  <div>
    <el-drawer title="图标选择" :visible.sync="drawer" direction="rtl" :with-header="false" :show-close="true"
               :wrapperClosable="false" :destroy-on-close="true" class="drawer-main" size="1000px" :show="show"
               @close="click" append-to-body>
      <div class="close" @click="click">
        <i class="el-icon-close"></i>
      </div>

      <div class="drawer-title">
        选择文件
      </div>
      <!-- 分类展示 -->
      <div class="drawer-content">
        <div class="drawer-content-left">
          <el-scrollbar style="height:100%;">
            <div style="margin: 10px;">
              <el-tree :data="cateData" node-key="id" :props="defaultProps" :expand-on-click-node="false"
                       ref="tree" show-checkbox @check-change="handleNodeClick" check-strictly
                       check-on-click-node :default-checked-keys="dckey" :default-expand-all="true">
              </el-tree>
            </div>
          </el-scrollbar>
        </div>
        <div class="drawer-content-right">
          <!-- 这是头部 -->
          <div class="d-c-r-t">
            <el-form :inline="true" :model="formInline" class="demo-form-inline" style="margin-left: 10px;">
              <el-form-item>
                <el-radio-group v-model="formInline.type" size="small" @change="RadioChange">
                  <el-radio :label="1" border>图片</el-radio>
                  <el-radio :label="3" border>视频</el-radio>
                  <el-radio :label="2" border>文件</el-radio>
                  <el-radio :label="4" border>其它</el-radio>
                </el-radio-group>
                <!-- <el-tag v-for="item in tagDate" :key="item.label" :type="item.type" :effect="item.plain"
                  @click="clicktag(item)">
                  {{ item.label }}
                </el-tag> -->
              </el-form-item>
              <el-form-item>

                <el-input v-model="formInline.keyWord" size="mini" placeholder="关键字查询"></el-input>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" size="mini">查询</el-button>
              </el-form-item>
            </el-form>
            <div>
              <el-button type="success" size="mini" @click="uploadDrawer = true">上传图片</el-button>
            </div>

          </div>
          <!-- 头部结束 -->
          <!-- 中间内容开始 -->
          <div class="d-c-r-c" :style="{height : slbHeight } ">
            <el-scrollbar style="height: 100%;">
              <div style="margin-right: 10px;">
                <transition name="fade-transform" mode="out-in">
                  <div class="d-c-r-l">
                    <div class="d-c-r-i" v-for="(item,index) in filesDate" :key="index" v-if="filesDate.length>0">
                      <el-image :src="item.http_url" fit="contain" v-if="item.type==1"></el-image>
                      <el-image :src="require('@/assets/img/video.png')" fit="contain" v-if="item.type==3"></el-image>
                      <el-image :src="require('@/assets/img/files.png')" fit="contain" v-if="item.type==2"></el-image>
                      <div class="d-c-r-i-h">
                        <i class="el-icon-zoom-in" @click="listshowpic(item)"></i>
                        <i class="el-icon-delete-solid" @click="delRole(item)"></i>
                        <i class="el-icon-check" @click="selectImg(item)"></i>
                        <!--                         <i class="el-icon-refresh-right"></i>-->
                      </div>
                      <div class="select-check" :class="[item.show? 'showflex' : 'hide']"><i
                          class=" el-icon-check"></i></div>
                    </div>
                    <el-empty v-if="filesDate.length<=0"></el-empty>
                  </div>
                </transition>

              </div>
            </el-scrollbar>

          </div>
          <!-- 中间内容结束 -->
          <!-- 底部分页开始 -->
          <div class="d-c-r-b">
            <el-pagination background @size-change="handleSizeChanges"
                           @current-change="handleCurrentChanges" :current-page="pageNumber"
                           :page-sizes="[10, 50, 100, 200]" :page-size="pageSize"
                           layout="total, prev, pager, next, jumper" :total="total">
            </el-pagination>
            <!-- <el-pagination background layout="prev, pager, next" :total="1000">
            </el-pagination> -->
          </div>
          <!-- 底部分页结束 -->
        </div>
      </div>
      <div class="drawerfoot">
        <el-button size="mini" type="success" @click="opencate = true">添加分类</el-button>
        <el-button size="mini" type="danger" @click="uploadDrawer = true">上传图片</el-button>
        <el-button size="mini" type="primary" @click="sureSelect">确定选择</el-button>
        <el-button size="mini" type="info">取消</el-button>
        <el-button size="mini" type="warning">批量转移</el-button>
      </div>


      <el-drawer title="上传文件" :visible.sync="uploadDrawer" size="820px" :append-to-body="true" class="drawer-main"
                 :with-header="false">
        <div class="close" @click="uploadDrawer = false">
          <i class="el-icon-close"></i>
        </div>
        <div class="drawer-title">
          上传文件
        </div>
        <div style="margin: 20px;">
          <div class="upload-button">
            <el-button type="success" size="mini" @click="submitUpload">上传服务器</el-button>
          </div>
          <el-form ref="form" :model="form" label-width="80px" label-position="top">
            <el-row>
              <el-col :span="24">
                <el-form-item label="分类" prop="cateid">
                  <div style="height: 30px; line-height: 30px;">
                    <treeselect v-model="form.cateid" :options="parentDate" :normalizer="normalizer"
                                :show-count="true" placeholder="选择分类"/>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-upload class="upload-demo" ref="upload" :action="_self.actions" :on-preview="handlePreview"
                     :on-remove="handleRemove" :file-list="fileList" :auto-upload="false" multiple
                     list-type="picture-card" :headers="uploadHeader" :data="form" :on-success="uploadsuccess">
            <i slot="default" class="el-icon-plus"></i>
            <!-- <div class="upload-button">
              <el-button type="success" size="mini" @click="submitUpload">上传服务器</el-button>
            </div> -->
          </el-upload>
        </div>
      </el-drawer>
    </el-drawer>
    <el-dialog :visible.sync="dialogVisible" title="图片浏览" v-dialogDrag>
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>


    <el-dialog v-dialogDrag :visible.sync="opencate" width="600px" append-to-body
               :title="!formcate.cate_id ? '新增' : '修改'">
      <el-form ref="form" :model="formcate" :rules="rulescate" label-width="100px">
        <el-row>

          <el-col :span="24">
            <el-form-item label="上级分类" prop="parent_id">
              <div style="height: 30px; line-height: 30px;">
                <treeselect v-model="formcate.parent_id" :options="cateAdd" :normalizer="normalizer"
                            :show-count="true" placeholder="请选择上级分类"/>
              </div>

            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label=" 分类名称" prop="cate_name">
              <el-input v-model="formcate.cate_name" placeholder="请输入分类名称" size="small"/>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="formcate.remarks" size="mini" type="textarea" :rows="4"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="排序" prop="order_by">
              <el-input v-model="formcate.order_by" placeholder="请输入排序" size="small"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="opencate = false" size="small">取 消</el-button>
        <el-button type="primary" @click="!formcate.cate_id ? submitForm('form') : subEditForm('form') "
                   size="small">确 定
        </el-button>
      </div>

    </el-dialog>

  </div>
</template>

<script>
let _self;
let uploads = process.env.VUE_APP_API;
import {
  getCateList,
  addCate,
  FilesListPage,
  delFiles
} from '@/api/tool/files'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import {
  getToken
} from '@/common/token'
// import {
// 	FilesListPage,
// 	delFiles,
// 	batchRemove
// } from '@/api/tool/files';
export default {
  name: 'select-fiels',
  components: {
    Treeselect
  },
  data() {
    return {
      drawer: false,
      cateData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      radio3: 0,
      formInline: {
        type: this.filestype
      },
      clientHeight: '',
      slbHeight: '',
      uploadDrawer: false, //上传窗口
      dialogImageUrl: '',
      dialogVisible: false,
      parentDate: [],
      form: {
        cateid: undefined
      },
      actions: uploads + '/apiadmin/uploads/index',
      uploadHeader: {
        "Authorization": "Bearer " + getToken()
      },
      fileList: [],
      rules: [],

      dckey: [0],
      pageSize: 40, //一页显示多少条
      pageNumber: 1, //当前多少页
      keyWord: '',
      total: 0, //总页数
      filesDate: [], //文件数据
      opencate: false,
      formcate: {

        'cate_name': undefined,
        'parent_id': undefined,
        'remarks': undefined,
        'order_by': undefined,
        'icon': undefined,

      },
      rulescate: {

        cate_name: [{
          required: true,
          message: ' 分类名称.不能为空',
          trigger: 'blur'
        }],
        parent_id: [{
          required: true,
          message: '上级ID.不能为空',
          trigger: 'blur'
        }],
        order_by: [{
          required: true,
          message: '排序.不能为空',
          trigger: 'blur'
        }],

      },
      cateAdd: [], //添加分类数据
      selectDate: [], //选择中的

    };
  },
  props: {
    selectNum: {
      type: Number,
      default: 1
    },
    show: {
      type: Boolean,
      default: false
    },
    filestype: {
      type: Number,
      default: 1
    },
  },
  created() {
    _self = this;
    _self.init();
    _self.getFiles();

  },
  mounted() {
    this.clientHeight = `${document.documentElement.clientHeight}`; //获取浏览器可视区域高度
    let that = this;
    window.onresize = function () {
      this.clientHeight = `${document.documentElement.clientHeight}`;
      that.slbHeight = this.clientHeight - 211 + 'px';
    }
  },
  watch: {
    clientHeight() { //如果clientHeight 发生改变，这个函数就会运行
      this.changeFixed(this.clientHeight)
    },
    show() {
      this.drawer = this.show;

    }
  },
  methods: {
    changeFixed(clientHeight) {
      this.slbHeight = clientHeight - 211 + 'px';
    },
    click() {
      this.$emit('update', this.show)
      this.selectDate = [];
      //this.init();
      this.getFiles();
    },
    init() {
      getCateList().then((res) => {
        const menu = {
          id: 0,
          name: '全部文件',
          children: []
        };
        menu.children = res.data.filesCateTree;
        _self.cateData.push(menu);
        const menus = {
          id: 0,
          name: '根分类',
          children: []
        }
        menus.children = res.data.filesCateTree;
        _self.cateAdd.push(menus);
        _self.parentDate = res.data.filesCateTree;
      })
    },
    getFiles() {
      let param = {
        "pageSize": _self.pageSize,
        "pageNumber": _self.pageNumber,
        "keyWord": _self.keyWord,
        "type": _self.formInline.type,
        "cateid": _self.dckey[0],
      }
      FilesListPage(param).then((res) => {
        _self.filesDate = res.data.list;
        _self.total = res.data.total;
      })
    },
    normalizer: function (node) {

      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children
      };
    },
    // handlePictureCardPreview(file) {
    // 	this.dialogImageUrl = file.url;
    // 	this.dialogVisible = true;
    // },
    handleRemove(file) {
      console.log(file);
    },
    submitUpload() {

      if (_self.form.cateid == undefined || _self.form.cateid == null) {
        _self.msgError("请选择分类");
        return false;
      }


      this.$refs.upload.submit();
    },
    handlePreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    listshowpic(data) {

      this.dialogImageUrl = data.http_url;
      this.dialogVisible = true;
    },
    uploadsuccess(res) {
      if (res.code == 200) {
        _self.getFiles();
        this.$refs.upload.clearFiles();
        _self.msgSuccess(res.msg);
        _self.uploadDrawer = false;
      } else {
        _self.msgError(res.msg);
      }
    },
    handleNodeClick(data, checked, node) {
      if (checked === true) {
        this.checkedId = data.id;
        this.$refs.tree.setCheckedKeys([data.id]);
        _self.dckey = [data.id];
      } else {
        if (this.checkedId == data.id) {
          this.$refs.tree.setCheckedKeys([data.id]);
          _self.dckey = [data.id];
        }
      }
      _self.getFiles();
    },
    handleSizeChanges: function (e) {
      _self.pageSize = e;
      _self.getFiles();
    },
    handleCurrentChanges: function (e) {
      _self.pageNumber = e;
      _self.getFiles();
    },
    delRole: function (data) {
      _self.$confirm('确定删除【' + data.title + '】此文件', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delFiles(data.fid).then((res) => {
          if (res.code == 200) {
            _self.msgSuccess(res.msg);
            _self.getFiles();
          } else {
            _self.msgError(res.msg);
          }
        })
      }).catch((e) => {
        console.log(e)
        _self.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    RadioChange(e) {
      _self.fileType = e;
      _self.getFiles();
    },
    submitForm: function (data) {
      this.$refs[data].validate((valid) => {
        if (valid) {
          _self.addcate();
        } else {
          return false;
        }
      });
    },
    addcate: function () {
      addCate(_self.formcate).then((res) => {
        if (res.code == 200) {
          _self.msgSuccess(res.msg)
          _self.cateData = [];
          _self.opencate = false;
          _self.init();
        } else {
          _self.msgError(res.msg);
        }
      })
    },
    selectImg: function (item) {
      // let checkNum = _self.selectDate.length;
      if (item.show == true) {
        _self.$set(item, 'show', false);
        _self.selectDate.forEach((its) => {
          if (its.id == item.fid) {
            var index = _self.selectDate.indexOf(its);
            if (index > -1) {
              _self.selectDate.splice(index, 1);
            }
          }
        })
      } else {
        // if (_self.selectNum == 1) {
        //   _self.filesDate.forEach((its) => {
        //     if (its.id != item.fid) {
        //       _self.$set(its, 'show', false);
        //     }
        //   })
        //   _self.selectDate = [];
        //   _self.selectDate.push({
        //     id: item.fid,
        //     urls: item.http_url
        //   });
        //   _self.$set(item, 'show', true);
        //   console.log(_self.selectDate)
        // } else {
        //   if (checkNum < _self.selectNum) {
        _self.$set(item, 'show', true);
        _self.selectDate.push({
          id: item.fid,
          urls: item.http_url
        });
        // }
        // }
      }
    },
    sureSelect: function () {
      this.$emit('selectSure', this.selectDate);
      this.click();
      this.selectDate = [];
    },
  }
};
</script>

<style lang="scss">
.drawer-main {
  .closes {
    width: 40px;
    height: 40px;
    position: absolute;
    left: -40px;
    top: 46%;
    background-color: #FFFFFF;
    cursor: pointer;
    padding: 5px 5px;
    border-bottom-left-radius: 20px;
    border-top-left-radius: 20px;

    i {
      font-size: 30px;
      color: #777;
    }
  }

  .drawer-title {
    height: 50px;
    background-color: #ecf5ff;
    border-color: #d9ecff;
    color: #409EFF;
    text-align: left;
    width: 100%;
    line-height: 50px;
    text-indent: 20px;
  }

  .drawer-content {
    width: 100%;
    height: calc(100% - 100px);
    display: flex;
    // background: #f7f7f7;

    .drawer-content-left {
      width: 200px;
      height: 100%;
      border-right: #f1f1f1 solid 1px;
      float: left;

      .el-tree {
        // background: #f7f7f7 !important;
        // border-radius: 5px;
      }

      .el-tree-node:focus > .el-tree-node__content {
        background-color: #ecf5ff;
        border-radius: 5px;
      }
    }

    .drawer-content-right {

      flex: 1;
      height: 100%;

      margin-top: 10px;
      margin-bottom: 10px;
      margin-left: 10px;

      .el-radio {
        margin-right: 5px;
      }

      .d-c-r-t {
        height: 50px;
        border-bottom: #f1f1f1 solid 1px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .el-form-item {
          margin-bottom: 0;
        }

        margin-right: 10px;
      }

      .d-c-r-c {
        //height: calc(100% - 110px);
        height: -moz-calc(100% - 110px);
        height: -webkit-calc(100% - 110px);
        height: calc(100% - 110px);
        width: 100%;


        .d-c-r-l {
          display: flex;
          flex-wrap: wrap;


          .d-c-r-i {
            width: 130px;
            height: 130px;
            margin: 10px;
            border: #f7f7f7 solid 1px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #f1f1f1;
            position: relative;

            .el-image {
              width: calc(100% - 20px);
              height: calc(100% - 20px);
              margin: 10px;

            }

            .select-check {
              position: absolute;
              top: 0px;
              right: 0px;
              width: 0;
              height: 0;
              border-top: 30px solid #67C23A;
              border-left: 30px solid transparent;
              display: none;

              i {
                position: absolute;
                top: -27px;
                right: 0px;
                color: #ffffff;
              }
            }

            .showflex {
              display: block !important;

            }

            .hide {
              display: none !important;
            }

            .d-c-r-i-h {
              background-color: rgba(0, 0, 0, 0.4);
              width: 100%;
              height: 100%;
              position: absolute;
              display: none;
              align-items: center;
              text-align: center;
              justify-content: space-between;

              i {
                font-size: 20px;
                color: #ffffff;
                margin: 10px;

              }
            }

          }

          .d-c-r-i:hover .d-c-r-i-h {
            display: flex !important;
          }
        }
      }

      .d-c-r-b {
        border-top: #f7f7f7 solid 1px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 40px;

      }
    }
  }

  .drawerfoot {
    background: #f7f7f7;
    height: 50px;
    display: flex;
    align-items: center;
    padding-left: 10px;
  }


}

.upload-button {
  height: 50px;
  width: 100%;
  border-bottom: #f7f7f7 solid 1px;
}
</style>
